<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="province">
		</select>
		<select id="city">
		</select>
		<select id="area">
		</select>
		<script src="jquery.min.js"></script>
		<script src="citys.js"></script>
		
		<script>
			let province=$("#province");
			let city=$("#city");
			let area=$("#area");
			// console.log(citys)
			for(let i=0;i<citys.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${citys[i].provinceName}</option>`;
				province.append(option);
			}
			let mallCityList=citys[0].mallCityList;//在省份下找到对应的市
			for(let i=0;i<mallCityList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallCityList[i].cityName}</option>`;
				city.append(option);
			}
			let mallAreaList=citys[0].mallCityList[0].mallAreaList//在市下找到对应的区
			// console.log(mallAreaList)
			for(let i=0;i<mallAreaList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallAreaList[i].areaName}</option>`;
				area.append(option);
			}
			
			//实现点击对应的省份和市区也随之动态改变;
			province.change(function(){
				updataCity.call(this)//先要确定this的正确指向
				updataArea.call(city[0]);//确定刚进入页面时当前的显示
			})
			//实现点击对应的市区随之动态改变
			city.change(function(){
				updataArea.call(this);
			})
			//更新市
			function updataCity(){
				//先把内容清空防止追加
				city.html("");
				 cityList=citys[this.selectedIndex].mallCityList;//通过selectedIndex属性找到当前省份下的所有市
				for(let i=0;i<cityList.length;i++){
					// console.log(cityList[i])
					let option=`<option>${cityList[i].cityName}</option>`;
					city.append(option);
				}
			}
			//更新区
			function updataArea(){
				area.html("")
				arealist=cityList[this.selectedIndex].mallAreaList;
				console.log(arealist)
				for(let i=0;i<arealist.length;i++){
					let option=`<option>${arealist[i].areaName}</option>`;
					area.append(option);
					}
			}
		</script>
	</body>
</html>
